import {ITodoItem} from "../../App.tsx";
import CompletedTodoItemArea from "../CompletedTodoItemArea";
import styled from "@emotion/styled";
type IProps = {
    list: ITodoItem[]
    onItemDelete: (id: string) => void;
}

const CompletedListArea = ({list,onItemDelete}: IProps) => {

    return (<Main>
        {list.map(item =>
            !!item.hasCompleted && <CompletedTodoItemArea key={item.id} data={item}   onItemDelete={onItemDelete} />,
        )}

    </Main>);
};

const Main = styled.div`
  position: relative;
  align-items: center;
`;

export default CompletedListArea;